<template>
  <div class="mindmap-page">
    <!-- 顶部标题栏 -->
    <div class="page-header">
      <h1>企业关系思维导图</h1>
      <p>展示查询企业的关联关系网络</p>
    </div>
    
    <!-- 思维导图容器 -->
    <div id="mindmap-container" class="mindmap-wrap"></div>
    
    <!-- 图例说明 -->
    <div class="legend">
      <h3>图例说明</h3>
      <ul>
        <li :class="['legend-item', 'color-shareholder']">股东企业</li>
        <li :class="['legend-item', 'color-supplier-bid']">供应商(招标)</li>
        <li :class="['legend-item', 'color-supplier']">供应商</li>
        <li :class="['legend-item', 'color-investment']">对外投资</li>
        <li :class="['legend-item', 'color-branch']">分支机构</li>
        <li :class="['legend-item', 'color-customer-bid']">客户(中标)</li>
        <li :class="['legend-item', 'color-customer']">客户</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Jsmind from 'jsmind';
import 'jsmind/draggable-node';
import 'jsmind/style/jsmind.css';

const mindInstance = ref(null);

// 思维导图数据 - 为每个主分支添加自定义类名标识
const mindData = {
  meta: {
    name: '企业关系思维导图',
    direction: 'left-right'
  },
  format: 'node_tree',
  data: {
    id: 'root',
    topic: '查询企业',
    children: [
      // 股东企业（红色系）
      {
        id: 'shareholder',
        topic: '股东企业 (2,342)',
        direction: 'left',
        // 自定义类名用于样式区分
        'background-color': '#f26e68',
        children: [
          {
            id: 'shareholder-list',
            topic: '企业名称(持股比例)',
            'background-color': '#f26e68',
            'foreground-color': 'blue',
            children: [
              { id: 's-a', topic: 'a企业(21%)', 'background-color': '#f26e68' },
              { id: 's-b', topic: 'b企业(21%)', 'background-color': '#f26e68' },
              { id: 's-c', topic: 'c企业(21%)', 'background-color': '#f26e68' },
              { id: 's-d', topic: 'd企业(21%)', 'background-color': '#f26e68' },
              { id: 's-e', topic: 'e企业(21%)', 'background-color': '#f26e68' },
            ]
          }
        ]
      },
      // 供应商(招标)（紫色系）
      // {
      //   id: 'supplier-bid',
      //   topic: '供应商(招标) (2,342)',
      //   direction: 'left',
      //   class: 'branch-supplier-bid',
      //   children: [
      //     {
      //       id: 'supplier-bid-list',
      //       topic: '企业名称(中标金额)',
      //       class: 'branch-supplier-bid',
      //       children: [
      //         { id: 'sb-b', topic: 'b企业(2.342万)', class: 'branch-supplier-bid' },
      //         { id: 'sb-e', topic: 'e企业(2.342万)', class: 'branch-supplier-bid' },
      //         { id: 'sb-f', topic: 'f企业(2.342万)', class: 'branch-supplier-bid' },
      //         { id: 'sb-g', topic: 'g企业(2.342万)', class: 'branch-supplier-bid' },
      //         { id: 'sb-h', topic: 'h企业(2.342万)', class: 'branch-supplier-bid' },
      //       ]
      //     }
      //   ]
      // },
      // 供应商（蓝色系）
      // {
      //   id: 'supplier',
      //   topic: '供应商 (2,342)',
      //   direction: 'left',
      //   class: 'branch-supplier',
      //   children: [
      //     {
      //       id: 'supplier-list',
      //       topic: '企业名称(付款关系)',
      //       class: 'branch-supplier',
      //       children: [
      //         { id: 'sup-l', topic: 'l企业(2.342万)', class: 'branch-supplier' },
      //         { id: 'sup-m', topic: 'm企业(2.342万)', class: 'branch-supplier' },
      //         { id: 'sup-f', topic: 'f企业(2.342万)', class: 'branch-supplier' },
      //         { id: 'sup-g', topic: 'g企业(2.342万)', class: 'branch-supplier' },
      //         { id: 'sup-e', topic: 'e企业(2.342万)', class: 'branch-supplier' },
      //       ]
      //     }
      //   ]
      // },
      // 对外投资（红色系）
      {
        id: 'investment',
        topic: '对外投资 (子集的数量)',
        direction: 'right',
        class: 'branch-investment',
        'background-color': '#f79d49',
        children: [
          {
            id: 'investment-list',
            topic: '企业名称(持股比例)',
            class: 'branch-investment',
            'background-color': '#f79d49',
            children: [
              { id: 'i-a', topic: 'a企业(21%)', class: 'branch-investment', 'background-color': '#f79d49', },
              { id: 'i-b', topic: 'b企业(21%)', class: 'branch-investment', 'background-color': '#f79d49', },
              { id: 'i-c', topic: 'c企业(21%)', class: 'branch-investment', 'background-color': '#f79d49', },
              { id: 'i-d', topic: 'd企业(21%)', class: 'branch-investment', 'background-color': '#f79d49', },
              { id: 'i-e', topic: 'e企业(21%)', class: 'branch-investment', 'background-color': '#f79d49', },
            ]
          }
        ]
      },
      // 分支机构（橙色系）
      // {
      //   id: 'branch',
      //   topic: '分支机构 (2,342)',
      //   direction: 'right',
      //   class: 'branch-branch',
      //   children: [
      //     {
      //       id: 'branch-list',
      //       topic: '企业名称(持股比例)',
      //       class: 'branch-branch',
      //       children: [
      //         { id: 'br-a', topic: 'a企业(21%)', class: 'branch-branch' },
      //         { id: 'br-b', topic: 'b企业(21%)', class: 'branch-branch' },
      //         { id: 'br-c', topic: 'c企业(21%)', class: 'branch-branch' },
      //         { id: 'br-d', topic: 'd企业(21%)', class: 'branch-branch' },
      //         { id: 'br-e', topic: 'e企业(21%)', class: 'branch-branch' },
      //       ]
      //     }
      //   ]
      // },
      // 客户(中标)（黄色系）
      // {
      //   id: 'customer-bid',
      //   topic: '客户(中标) (2,342)',
      //   direction: 'right',
      //   class: 'branch-customer-bid',
      //   children: [
      //     {
      //       id: 'customer-bid-list',
      //       topic: '企业名称(中标金额)',
      //       class: 'branch-customer-bid',
      //       children: [
      //         { id: 'cb-l', topic: 'l企业(2.342万)', class: 'branch-customer-bid' },
      //         { id: 'cb-m', topic: 'm企业(2.342万)', class: 'branch-customer-bid' },
      //         { id: 'cb-f', topic: 'f企业(2.342万)', class: 'branch-customer-bid' },
      //         { id: 'cb-g', topic: 'g企业(2.342万)', class: 'branch-customer-bid' },
      //         { id: 'cb-h', topic: 'h企业(2.342万)', class: 'branch-customer-bid' },
      //       ]
      //     }
      //   ]
      // },
      // 客户（绿色系）
      // {
      //   id: 'customer',
      //   topic: '客户 (2,342)',
      //   direction: 'right',
      //   class: 'branch-customer',
      //   children: [
      //     {
      //       id: 'customer-list',
      //       topic: '企业名称(付款关系)',
      //       class: 'branch-customer',
      //       children: [
      //         { id: 'cus-l', topic: 'l企业(2.342万)', class: 'branch-customer' },
      //         { id: 'cus-m', topic: 'm企业(2.342万)', class: 'branch-customer' },
      //         { id: 'cus-f', topic: 'f企业(2.342万)', class: 'branch-customer' },
      //         { id: 'cus-g', topic: 'g企业(2.342万)', class: 'branch-customer' },
      //         { id: 'cus-h', topic: 'h企业(2.342万)', class: 'branch-customer' },
      //       ]
      //     }
      //   ]
      // }
    ]
  }
};

// 思维导图配置
const mindOptions = {
  container: 'mindmap-container',
  editable: false,
  theme: 'info',
  show_toolbar: true,
  show_node_control: false,
  show_minimap: true,
  zoom: {
    min: 1,
    max: 200,
    step: 0.1,
    default: 0.7
  },
  allow_node_direction: true,
  // 启用自定义类名（关键配置）
  support_class: true,
  view: {
      engine: 'svg',
    line_color: '#FF0000', // 设置线条颜色为红色
     expander_style: 'number', // 使用数字显示子节点数量
    draggable: true, // 启用拖动画布功能
        hide_scrollbars_when_draggable: true // 启用拖动时隐藏滚动条
  }
};

onMounted(() => {
  mindInstance.value = new Jsmind(mindOptions);
  mindInstance.value.show(mindData);
  console.log(mindInstance.value, 9);
  

  // 节点点击事件
  // mindInstance.value.on('select_node', (node) => {
  //   console.log('选中节点:', node.topic);
  // });
});
</script>

<style scoped>
.mindmap-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #fafafa;
  position: relative;
}

/* 标题栏样式 */
.page-header {
  padding: 16px 24px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 10;
  position: relative;
}

.page-header h1 {
  color: #333;
  font-size: 20px;
  margin-bottom: 4px;
}

.page-header p {
  color: #666;
  font-size: 14px;
}

/* 思维导图容器 */
.mindmap-wrap {
  width: 100%;
  height: calc(100% - 70px); /* 减去标题栏高度 */
}

/* 图例样式 */
.legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-width: 280px;
}

.legend h3 {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.legend ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.legend-item {
  font-size: 12px;
  padding-left: 20px;
  position: relative;
  white-space: nowrap;
}

.legend-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  transform: translateY(-50%);
}

/* 节点样式 - 核心 */
::v-deep(.jsmind-node) {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 5px 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

::v-deep(.jsmind-node:hover) {
  transform: translateY(-2px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

/* 根节点样式 */
::v-deep(.jsmind-node-root) {
  background-color: #fff !important;
  color: #333 !important;
  font-weight: bold !important;
  border: 2px solid #e5e7eb !important;
  padding: 8px 16px !important;
  font-size: 15px !important;
}

/* 1. 股东企业 - 红色系 */
::v-deep(.jsmind-node.branch-shareholder) {
  background-color: #f26e68 !important;
  color: #d92121 !important;
  border: 1px solid #ffd7d7 !important;
}
::v-deep(.jsmind-connector.branch-shareholder) {
  stroke: #ff6b6b !important;
  stroke-width: 1.8px !important;
}
.color-shareholder::before {
  background-color: #ff6b6b;
}

/* 2. 供应商(招标) - 紫色系 */
::v-deep(.jsmind-node.branch-supplier-bid) {
  background-color: #f9f0ff !important;
  color: #9747ff !important;
  border: 1px solid #ecd9ff !important;
}
::v-deep(.jsmind-connector.branch-supplier-bid) {
  stroke: #b779ff !important;
  stroke-width: 1.8px !important;
}
.color-supplier-bid::before {
  background-color: #b779ff;
}

/* 3. 供应商 - 蓝色系 */
::v-deep(.jsmind-node.branch-supplier) {
  background-color: #e6f4ff !important;
  color: #1677ff !important;
  border: 1px solid #bfe1ff !important;
}
::v-deep(.jsmind-connector.branch-supplier) {
  stroke: #69b1ff !important;
  stroke-width: 1.8px !important;
}
.color-supplier::before {
  background-color: #69b1ff;
}

/* 4. 对外投资 - 深红色系 */
::v-deep(.jsmind-node.branch-investment) {
  background-color: #fff0f3 !important;
  color: #e02020 !important;
  border: 1px solid #ffccd5 !important;
}
::v-deep(.jsmind-connector.branch-investment) {
  stroke: #ff4d6d !important;
  stroke-width: 1.8px !important;
}
.color-investment::before {
  background-color: #ff4d6d;
}

/* 5. 分支机构 - 橙色系 */
::v-deep(.jsmind-node.branch-branch) {
  background-color: #fff7e6 !important;
  color: #fa8c16 !important;
  border: 1px solid #ffe8cc !important;
}
::v-deep(.jsmind-connector.branch-branch) {
  stroke: #ffb547 !important;
  stroke-width: 1.8px !important;
}
.color-branch::before {
  background-color: #ffb547;
}

/* 6. 客户(中标) - 黄色系 */
::v-deep(.jsmind-node.branch-customer-bid) {
  background-color: #fffbe6 !important;
  color: #d48806 !important;
  border: 1px solid #fff3bf !important;
}
::v-deep(.jsmind-connector.branch-customer-bid) {
  stroke: #ffd666 !important;
  stroke-width: 1.8px !important;
}
.color-customer-bid::before {
  background-color: #ffd666;
}

/* 7. 客户 - 绿色系 */
::v-deep(.jsmind-node.branch-customer) {
  background-color: #f6ffed !important;
  color: #36b37e !important;
  border: 1px solid #d9f7be !important;
}
::v-deep(.jsmind-connector.branch-customer) {
  background-color: #36b37e !important;
  stroke: #73d13d !important;
  stroke-width: 1.8px !important;
}
.color-customer::before {
  background-color: #73d13d;
}

/* 工具栏样式优化 */
::v-deep(.jsmind-toolbar) {
  top: 80px !important;
  left: 20px !important;
  background-color: #fff !important;
  border-radius: 8px !important;
  padding: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* 缩略图位置调整 */
::v-deep(.jsmind-minimap) {
  bottom: 20px !important;
  right: 20px !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
}
</style>